<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象的操作</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>姓名{{info.username}}</h3>
        <h3>年龄{{info.userage}}</h3>
        <h3>电话{{info.usertel}}</h3>
        <button @click="add">新增一个属性</button>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            info:{ //页面要出现的数据  尽量在data中声明  以免改变以后 页面不重新渲染
                username:"leson",
                userage:18,
            }
        },
        methods:{
            add(){
               // this.info.usertel = "132"; //不要直接复制 除非data中有
              // this.info = {username:"leson",userage:18,usertel:132}
              // this.info = {...this.info,usertel:132}
              this.$set(this.info,"usertel",132);//补充对象的属性
            }
        }
    })

</script>
</html>